import React from 'react'
import { HashRouter, Route, Link } from 'react-router-dom'
import values from '../../common/string'
import logo from '../../assets/img/pikaqiu.png'

import './styles.css'
import { Divide, SvgIcon } from '../../components/design'

export default function Header() {
  return (
    <ul className='header_wrap'>
      <section className='left_wrap'>
        <img className='header_icon' alt='logo' src={logo}></img>
        <div style={{ width: '8px' }}></div>
        <p>
          {values.home_name}
        </p>
      </section>
      <section className='right_wrap'>
        <li>
          <SvgIcon iconHref={'#icon-shouye'} />
          <Divide width={'4px'}/>
          <Link to="/">{values.router_name_index}</Link> </li>
        <li>
          <SvgIcon iconHref={'#icon-xiewenzhang'} />
          <Divide width={'4px'}/>
          <Link to="/article/">{values.router_name_article}</Link> </li>
        <li>
          <SvgIcon iconHref={'#icon-gongzuojingyan1'} />
          <Divide width={'4px'}/>
          <Link to="/resume/">{values.router_name_resume}</Link> </li>
        <li>
          <SvgIcon iconHref={'#icon-xiangce'} />
          <Divide width={'4px'}/>
          <Link to="/gallery/">{values.router_name_gallery}</Link> </li>
        <li>
          <SvgIcon iconHref={'#icon-keai'} />
          <Divide width={'4px'}/>
          <Link to="/about/">{values.router_name_about}</Link> </li>
      </section>
    </ul>
  )
}